<template>
  <div class="paypal">
    <Header>
      <template slot="left">
        <p>
          <svg-icon iconClass="back" @click="$router.push('/layout/home')" />
        </p>
      </template>
      <template slot="center">
        <p>支付</p>
      </template>
      <template slot="right">
        <p></p>
      </template>
    </Header>
    <div class="freightAmount">
      <p>运费金额</p>
      <p></p>
    </div>
    <van-field
      readonly
      clickable
      :value="value"
      @touchstart.native.stop="show = true"
      placeholder="请输入金额"
    />
    <!-- <van-number-keyboard  :show="show" :maxlength="6" @blur="show = false" /> -->
    <van-number-keyboard
      v-model="value"
      :show="show"
      theme="custom"
      extra-key="."
      close-button-text="完成"
      @blur="show = false"
      @close="Topayment()"
    />
    <!-- @input="onInput"
    @delete="onDelete"-->
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      show: false,
      value: ""
    };
  },
  methods: {
    Topayment() {
      this.$router.push({
        path: "/payment",
        query: {
          value : this.value
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.paypal {
  width: 100%;
  height: 100%;
  background: #eee;
  .header {
    background: blueviolet;
  }
  .freightAmount {
    width: 100%;
    height: px2rem(50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px2rem(15);
    font-size: px2rem(16);
    background: #fff;
  }
}
</style>